---
title: モーダルフック
description: フックを使用してプログラムでモーダルを開く
---

# モーダルフック

## フックを使用してプログラムでモーダルを開く

次のフックは、アプリケーション内でどこからでもモーダルをプログラム的に開くために提供されます。

- `useConnectModal`
- `useAccountModal`
- `useChainModal`

これらのフックのそれぞれは、対応するモーダルを開くための関数を含むオブジェクトを返します。モーダルを開くための必要な状態にない場合、返された関数は未定義になります。

```tsx
import {
  useConnectModal,
  useAccountModal,
  useChainModal,
} from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { openChainModal } = useChainModal();

  return (
    <>
      {openConnectModal && (
        <button onClick={openConnectModal} type="button">
          Open Connect Modal
        </button>
      )}

      {openAccountModal && (
        <button onClick={openAccountModal} type="button">
          Open Account Modal
        </button>
      )}

      {openChainModal && (
        <button onClick={openChainModal} type="button">
          Open Chain Modal
        </button>
      )}
    </>
  );
};
```

各フックはまた、モーダルのステータスを示すブール値を返します。一般的に、ウォレット接続のステータスに応じてユーザーの反応を直接確認するために、Connect Modalの状態に頼るのではなく、Wagmiのフック（例：`useAccount`）のみに頼ることが推奨されます。

```tsx
const { connectModalOpen } = useConnectModal();
const { accountModalOpen } = useAccountModal();
const { chainModalOpen } = useChainModal();
```

RainbowKitは非中断的かつレスポンシブに設計されているため、dAppはユーザーがウォレットを接続しているかどうかにかかわらず、常にインターフェースを表示すべきです。ユーザーはMetaMaskから直接ウォレットを接続または切断することができるため、dAppは基礎となる接続ステータスに直接応答する必要があります。

ユーザー認証にEthereumでのサインインのようなメカニズムを使用しているdAppは、代わりに[Authentication](/docs/authentication)機能を利用する必要があります。
